<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>排球队首页</title>
    <link rel="stylesheet" href="../../../css/style.css">
    <style>
        .hero-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 60px 20px;
            text-align: center;
        }
        
        .hero-title {
            font-size: 2.5rem;
            margin-bottom: 20px;
        }
        
        .hero-subtitle {
            font-size: 1.2rem;
            margin-bottom: 30px;
        }
        
        .carousel {
            position: relative;
            max-width: 800px;
            margin: 0 auto 40px;
            overflow: hidden;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        }
        
        .carousel-item {
            display: none;
            position: relative;
        }
        
        .carousel-item.active {
            display: block;
        }
        
        .carousel-item img {
            width: 100%;
            height: 400px;
            object-fit: cover;
        }
        
        .carousel-caption {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0,0,0,0.7);
            color: white;
            padding: 20px;
        }
        
        .carousel-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255,255,255,0.8);
            border: none;
            padding: 10px 15px;
            cursor: pointer;
            border-radius: 50%;
        }
        
        .carousel-prev {
            left: 10px;
        }
        
        .carousel-next {
            right: 10px;
        }
        
        .quick-links {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            padding: 40px 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .quick-link-card {
            background: white;
            border-radius: 10px;
            padding: 30px;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }
        
        .quick-link-card:hover {
            transform: translateY(-5px);
        }
        
        .quick-link-icon {
            font-size: 3rem;
            margin-bottom: 20px;
            color: #667eea;
        }
        
        .latest-news {
            background: #f8f9fa;
            padding: 40px 20px;
        }
        
        .news-container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .news-item {
            background: white;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .news-date {
            color: #666;
            font-size: 0.9rem;
        }
        
        .news-title {
            font-size: 1.2rem;
            margin: 10px 0;
            color: #333;
        }
        
        .news-excerpt {
            color: #666;
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <header>
        <nav class="navbar">
            <div class="nav-container">
                <div class="nav-logo">
                    <h2>排球队管理系统</h2>
                </div>
                <ul class="nav-menu">
                    <li><a href="index.html" class="active">首页</a></li>
                    <li><a href="../about/about.html">球队介绍</a></li>
                    <li><a href="../players/list.html">队员信息</a></li>
                    <li><a href="../matches/matches.html">比赛管理</a></li>
                    <li><a href="../training/training.html">训练安排</a></li>
                    <li><a href="../knowledge/index.html">排球知识</a></li>
                </ul>
            </div>
        </nav>
    </header>

    <main>
        <!-- 英雄区域 -->
        <section class="hero-section">
            <h1 class="hero-title">欢迎来到排球队</h1>
            <p class="hero-subtitle">团结协作，追求卓越</p>
        </section>

        <!-- 轮播图 -->
        <section class="carousel">
            <div class="carousel-item active">
                <img src="https://via.placeholder.com/800x400/667eea/ffffff?text=比赛精彩瞬间" alt="比赛精彩瞬间">
                <div class="carousel-caption">
                    <h3>最新比赛精彩瞬间</h3>
                    <p>查看我们最新的比赛照片和视频</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="https://via.placeholder.com/800x400/764ba2/ffffff?text=训练日常" alt="训练日常">
                <div class="carousel-caption">
                    <h3>训练日常</h3>
                    <p>记录我们的训练过程和进步</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="https://via.placeholder.com/800x400/667eea/ffffff?text=团队合影" alt="团队合影">
                <div class="carousel-caption">
                    <h3>团队合影</h3>
                    <p>我们的团队精神和友谊</p>
                </div>
            </div>
            
            <button class="carousel-nav carousel-prev" onclick="changeSlide(-1)">❮</button>
            <button class="carousel-nav carousel-next" onclick="changeSlide(1)">❯</button>
        </section>

        <!-- 快速链接 -->
        <section class="quick-links">
            <div class="quick-link-card">
                <div class="quick-link-icon">🏐</div>
                <h3>球队介绍</h3>
                <p>了解我们的历史、文化和荣誉</p>
                <a href="../about/about.html" class="btn btn-primary">了解更多</a>
            </div>
            
            <div class="quick-link-card">
                <div class="quick-link-icon">👥</div>
                <h3>队员信息</h3>
                <p>查看所有队员的详细资料</p>
                <a href="../players/list.html" class="btn btn-primary">查看队员</a>
            </div>
            
            <div class="quick-link-card">
                <div class="quick-link-icon">🏆</div>
                <h3>比赛管理</h3>
                <p>查看比赛预告和历史记录</p>
                <a href="../matches/matches.html" class="btn btn-primary">查看比赛</a>
            </div>
            
            <div class="quick-link-card">
                <div class="quick-link-icon">📚</div>
                <h3>排球知识</h3>
                <p>学习排球规则和技术</p>
                <a href="../knowledge/index.html" class="btn btn-primary">开始学习</a>
            </div>
        </section>

        <!-- 最新动态 -->
        <section class="latest-news">
            <div class="news-container">
                <h2 style="text-align: center; margin-bottom: 30px;">最新动态</h2>
                
                <div class="news-item">
                    <div class="news-date">2024年1月15日</div>
                    <h3 class="news-title">新赛季训练开始</h3>
                    <p class="news-excerpt">新赛季训练将于下周开始，请所有队员准时参加。我们将重点提升团队配合和技术水平。</p>
                </div>
                
                <div class="news-item">
                    <div class="news-date">2024年1月10日</div>
                    <h3 class="news-title">友谊赛胜利</h3>
                    <p class="news-excerpt">在昨天的友谊赛中，我们以3:1的比分战胜了对手，展现了良好的团队精神和技术水平。</p>
                </div>
                
                <div class="news-item">
                    <div class="news-date">2024年1月5日</div>
                    <h3 class="news-title">新队员加入</h3>
                    <p class="news-excerpt">欢迎新队员张三加入我们的团队！他将在主攻位置为球队贡献力量。</p>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <div class="footer-content">
            <p>&copy; 2024 排球队管理系统. 保留所有权利.</p>
        </div>
    </footer>

    <script>
        let currentSlide = 0;
        const slides = document.querySelectorAll('.carousel-item');

        function showSlide(n) {
            slides.forEach(slide => slide.classList.remove('active'));
            currentSlide = (n + slides.length) % slides.length;
            slides[currentSlide].classList.add('active');
        }

        function changeSlide(direction) {
            showSlide(currentSlide + direction);
        }

        // 自动轮播
        setInterval(() => {
            changeSlide(1);
        }, 5000);
    </script>
</body>
</html> 